<template>
  <div id="pdfDom">
    <el-row>
        <el-col :xs="24" :sm="24" :lg="24" class="primary">持续交付KPI看板</el-col>
    </el-row>
    <el-row>
        <el-col :xs="24" :sm="24" :lg="24" class="border"></el-col>
    </el-row>
    <el-row class="choose bgColor" style="position: relative;">
      <el-col :xs="24" :sm="24" :lg="24">
        <el-radio-group v-model="radio" class="flex-box">
          <el-radio :label="1" class="flexEl text-center" v-if="isCompany">集团</el-radio>
          <el-radio :label="2" class="flexEl el">
            事业群
            <el-select :disabled="radio !== 2" style="width: 20%;margin-left: 6px;" v-model="selectedGroup" placeholder="请选择事业群" clearable filterable>
              <el-option v-for="item in group_selector" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-radio>
        </el-radio-group>
        <div class="time">
          月份选择:
          <el-date-picker
            v-model="value1"
            @change="changeTime"
            type="monthrange"
            format="yyyy 年 MM 月"
            value-format="yyyy-MM"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始月份"
            end-placeholder="结束月份">
          </el-date-picker>
        </div>
      </el-col>

      <div class="PageBtn">
        <el-button type="primary" @click="toPage">持续交付KPI配置</el-button>
      </div>
    </el-row>

    <div class="line-chart marT">
      <el-row>
        <el-col :xs="24" :sm="24" :lg="24">
          <el-card class="box-card m-b" shadow="never">
            <div slot="header" class="clearfix" style="vertical-align:middle">
              <div style="float: left; padding: 10px 0">指标趋势</div>
              <el-select @change="exchange" v-model="targetValue" style="float: right; padding: 3px 0" filterable clearable placeholder="请选择指标类型">
                <el-option
                  v-for="(item, index) in targetSelect"
                  :key="index"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </div>

            <div>
              <ve-line
                ref="vline"
                :data="targetData"
                :settings="chartSettings">
              </ve-line>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div class="quality-table">
      <el-row class="bgColor marT">
        <el-col :xs="24" :sm="24" :lg="24">
            <div class="ibox-title pad">研发质量</div>

            <div class="table mar">
              <el-table
                :data="qualityData"
                :row-class-name="tableRowClassName"
                :header-cell-style="{background:'#eef1f6'}"
                style="width: 100%">
                <el-table-column
                    align="center"
                    type="index"
                    label="编号"
                    width="60">
                    <template slot-scope="scope">
                        <span>{{ scope.$index + 1 + qualitySize*(qualityCurrent - 1) }}</span>
                    </template>
                </el-table-column>

                <el-table-column
                    align="center"
                    label="分类"
                    prop="classify"
                    >
                </el-table-column>

                <el-table-column
                    align="center"
                    label="统计指标"
                    prop="name">
                </el-table-column>

                <el-table-column
                    align="center"
                    label="公司目标"
                    >
                    <template slot-scope="scope">
                      <div v-if="scope.row.company_indicator.value != 0">
                        <span v-if="scope.row.company_indicator.operator == 0">> {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                        <span v-else-if="scope.row.company_indicator.operator == 1">< {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                        <span v-else-if="scope.row.company_indicator.operator == 2">>= {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                        <span v-else-if="scope.row.company_indicator.operator == 3"><= {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                        <span v-else>= {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                      </div>
                      <div v-else></div>
                    </template>
                </el-table-column>
                <el-table-column :label="labelChoose + '平均'" align="center">
                <el-table-column
                    v-for="(item, idx) in qualityTable[0]"
                    :key="idx"
                    align="center"
                    :label="item.month"
                    fit
                    >
                    <template slot-scope="scope">
                      <span style="color: green;" v-if="scope.row.group_indicator[idx].reach_standard">{{ formatter(scope.row.type, scope.row.group_indicator[idx].value) }}</span>
                      <span v-else style="color: red;">{{ formatter(scope.row.type, scope.row.group_indicator[idx].value) }}</span>
                    </template>
                </el-table-column>
                </el-table-column>
              </el-table>
            </div>
        </el-col>
      </el-row>
    </div>

    <div class="efficient-table">
      <el-row class="bgColor marT">
        <el-col :xs="24" :sm="24" :lg="24">
            <div class="ibox-title pad">研发效率</div>

            <div class="table mar">
              <el-table
                :data="efficientData"
                :row-class-name="tableRowClassName"
                :header-cell-style="{background:'#eef1f6'}"
                style="width: 100%">
                <el-table-column
                    align="center"
                    type="index"
                    label="编号"
                    width="60">
                    <template slot-scope="scope">
                        <span>{{ scope.$index + 1 + qualitySize*(qualityCurrent - 1) }}</span>
                    </template>
                </el-table-column>

                <el-table-column
                    align="center"
                    label="分类"
                    prop="classify"
                    >
                </el-table-column>

                <el-table-column
                    align="center"
                    label="统计指标"
                    prop="name">
                </el-table-column>

                <el-table-column
                    align="center"
                    label="公司目标"
                    >
                    <template slot-scope="scope">
                      <div v-if="scope.row.company_indicator.value != 0">
                        <span v-if="scope.row.company_indicator.operator == 0">> {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                        <span v-else-if="scope.row.company_indicator.operator == 1">< {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                        <span v-else-if="scope.row.company_indicator.operator == 2">>= {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                        <span v-else-if="scope.row.company_indicator.operator == 3"><= {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                        <span v-else>= {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                      </div>
                      <div v-else></div>
                    </template>
                </el-table-column>
                <el-table-column :label="labelChoose + '平均'" align="center">
                <el-table-column
                    v-for="(item, idx) in efficientTable[0]"
                    :key="idx"
                    align="center"
                    :label="item.month"
                    fit
                    >
                    <template slot-scope="scope">
                      <span style="color: green;" v-if="scope.row.group_indicator[idx].reach_standard">{{ formatter(scope.row.type, scope.row.group_indicator[idx].value) }}</span>
                      <span v-else style="color: red;">{{ formatter(scope.row.type, scope.row.group_indicator[idx].value) }}</span>
                    </template>
                </el-table-column>
                </el-table-column>
              </el-table>
            </div>
        </el-col>
      </el-row>
    </div>

    <div class="complaint-table">
      <el-row class="bgColor marT">
        <el-col :xs="24" :sm="24" :lg="24">
            <div class="ibox-title pad">客户满意度</div>

            <div class="table mar">
              <el-table
                :data="complaintData"
                :row-class-name="tableRowClassName"
                :header-cell-style="{background:'#eef1f6'}"
                style="width: 100%">
                <el-table-column
                    align="center"
                    type="index"
                    label="编号"
                    width="60">
                    <template slot-scope="scope">
                        <span>{{ scope.$index + 1 + qualitySize*(qualityCurrent - 1) }}</span>
                    </template>
                </el-table-column>

                <el-table-column
                    align="center"
                    label="分类"
                    prop="classify"
                    >
                </el-table-column>

                <el-table-column
                    align="center"
                    label="统计指标"
                    prop="name">
                </el-table-column>

                <el-table-column
                    align="center"
                    label="公司目标"
                    >
                    <template slot-scope="scope">
                      <div v-if="scope.row.company_indicator.value != 0">
                        <span v-if="scope.row.company_indicator.operator == 0">> {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                        <span v-else-if="scope.row.company_indicator.operator == 1">< {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                        <span v-else-if="scope.row.company_indicator.operator == 2">>= {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                        <span v-else-if="scope.row.company_indicator.operator == 3"><= {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                        <span v-else>= {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                      </div>
                      <div v-else-if="scope.row.name == '投诉件数' && scope.row.company_indicator.value != 0">
                        <span v-if="scope.row.company_indicator.operator == 0">> {{ formatter(scope.row.type, scope.row.company_indicator.value) }}(每个事业群)</span>
                        <span v-else-if="scope.row.company_indicator.operator == 1">< {{ formatter(scope.row.type, scope.row.company_indicator.value) }}(每个事业群)</span>
                        <span v-else-if="scope.row.company_indicator.operator == 2">>= {{ formatter(scope.row.type, scope.row.company_indicator.value) }}(每个事业群)</span>
                        <span v-else-if="scope.row.company_indicator.operator == 3"><= {{ formatter(scope.row.type, scope.row.company_indicator.value) }}(每个事业群)</span>
                        <span v-else>= {{ formatter(scope.row.type, scope.row.company_indicator.value) }}(每个事业群)</span>
                      </div>
                      <div v-else></div>
                    </template>
                </el-table-column>
                <el-table-column :label="labelChoose + '平均'" align="center">
                <el-table-column
                    v-for="(item, idx) in complaintTable[0]"
                    :key="idx"
                    align="center"
                    :label="item.month"
                    fit
                    >
                    <template slot-scope="scope">
                      <span style="color: green;" v-if="scope.row.group_indicator[idx].reach_standard">{{ formatter(scope.row.type, scope.row.group_indicator[idx].value) }}</span>
                      <span v-else style="color: red;">{{ formatter(scope.row.type, scope.row.group_indicator[idx].value) }}</span>
                    </template>
                </el-table-column>
                </el-table-column>
              </el-table>
            </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getHeader } from '@/app.config'
import { removeToken, removeName } from '@/utils/auth'

export default {
  data() {
    return {
      radio: 1,
      value1: '',
      time: '',
      pickerOptions: {
        disabledDate(time) {
          let curDate = (new Date()).getTime()
          let year = 356 * 24 * 3600 * 1000
          let yearMonths = curDate - year
          return time.getTime() > Date.now() || time.getTime() < yearMonths
        }
      },
      isCompany: true, // 看公司的权限
      targetValue: '任务延期率', // 趋势图选择
      targetData: {
        columns: ['month', 'company_indicator', 'actual_indicator'],
        rows: []
      },
      chartSettings: {
        labelMap: {
          company_indicator: '公司目标值',
          actual_indicator: '任务延期率',
          task_overdue_avg_project: '任务延期率',
          git_log_pass_rate: 'git log检查一次通过率',
          avg_complexity: '圈复杂度',
          defect_density: '评审缺陷密度',
          effective_ratio: '评审有效比率',
          bug_degrade_rate: 'Bug degrade比例',
          bug_overtime_rate: 'Bug超期未解决比例',
          avg_selfcheck_pass_rate: '平均自检通过率',
          day_verify_test_count: '日自动化测试执行次数(VB)',
          day_daily_test_count: '日自动化测试执行次数(DB)',
          avg_daily_patch_count: '代码生产率(Patch)',
          avg_daily_effective_code: '代码生产率(有效代码行数)',
          bugfix_effective: '缺陷解决效率(每天平均)',
          bugfix_cost: '缺陷解决时长(每件平均)',
          avg_verify_duration: '平均构建时长(VB)',
          avg_daily_duration: '平均构建时长(DB)',
          avg_release_duration: '平均构建时长(RB)',
          avg_verify_queue_time: '平均构建等待时长(VB)',
          avg_daily_queue_time: '平均构建等待时长(DB)',
          avg_release_queue_time: '平均构建等待时长(RB)',
          avg_verify_success_rate: '平均构建成功率(VB)',
          avg_daily_success_rate: '平均构建成功率(DB)',
          avg_release_success_rate: '平均构建成功率(RB)',
          customer_complaint: '投诉件数',
          complaint_closed_rate: '投诉关闭率'
        }
      },
      targetSelect: [],
      labelChoose: '集团',
      qualitySize: 10,
      qualityCurrent: 1,
      efficientData: [], // 研发效率数据
      efficientTable: [],
      complaintData: [], // 客户满意度数据
      complaintTable: [],
      qualityData: [], // 研发质量数据
      selectedGroup: '', // 事业群选择
      groupId: '', // 事业群Id
      group_selector: [], // 事业群下拉初始数据
      qualityTable: []
    }
  },
  created() {
    this.initData()
  },
  mounted() {
    this.$nextTick(() => {

    })
  },
  methods: {
    toPage() {
      this.$router.push({
        path: '/project/deliver'
      })
    },
    formatter(type, value) { // 数据过滤器
      if(type === 'percent') {
        return Number(value * 100).toFixed(2) + '%' || '0.00%'
      } else if(type === 'time') {
        if (isNaN(value)) {
          value = 0
        }
        let theTime = parseInt(value) // 秒
        let theTime1 = 0 // 分
        let theTime2 = 0 // 小时
        let theTime3 = 0 // 天
        if (theTime > 60) {
          theTime1 = parseInt(theTime / 60)
          theTime = parseInt(theTime % 60)
          if (theTime1 > 60) {
            theTime2 = parseInt(theTime1 / 60)
            theTime1 = parseInt(theTime1 % 60)
            if (theTime2 > 24) {
              theTime3 = parseInt(theTime2 / 24)
              theTime2 = parseInt(theTime2 % 24)
            }
          }
        }
        let result = '' + parseInt(theTime) + '秒'
        if (theTime1 > 0) {
          result = '' + parseInt(theTime1) + '分' + result
        }
        if (theTime2 > 0) {
          result = '' + parseInt(theTime2) + '时' + result
        }
        if (theTime3 > 0) {
          result = '' + parseInt(theTime3) + '天' + result
        }
        return result
      } else if(type === 'KLOC') {
        return `${value}个/Kloc` || '0个/Kloc'
      } else if(type === '次') {
        return `${value}次` || '0次'
      } else if(type === '个/天') {
        return `${value}个/天` || '0个/天'
      } else if(type === '行/天') {
        return `${value}行/天` || '0行/天'
      } else if(type === '天/个') {
        return `${value}天/个` || '0天/个'
      } else {
        return value || 0
      }
    },
    lineFormatter(type, value) { // 表图数据过滤器
      if(type === 'percent') {
        return Math.round(value * 100) || 0.00
      } else if(type === 'time') {
        if (isNaN(value)) {
          value = 0
        }

        return value
      } else {
        return value || 0
      }
    },
    changeTime() {
      this.value1 ? this.time = this.value1.join(',') : this.time = ''
      this.lineData()
      this.quality()
      this.efficiency()
      this.complaint()
    },
    tableRowClassName(row, index) {
      row.index = index
    },
    initData() {
      this.select()
      this.lineData()
      this.quality()
      this.efficiency()
      this.complaint()
    },
    exchange() {
      this.lineData()
      this.$refs.vline.echarts.resize()
    },
    select() { // 头部事业群筛选框
      this.$axios.get(`${process.env.VUE_APP_KANBAN_HOST}/api/account/personal_group_dept`, {headers: getHeader()})
        .then((res) => {
          if(res.data.code === 200) {
            this.group_selector = res.data.group_info
            this.selectedGroup = this.group_selector[0].label
            this.isCompany = res.data.view_company
          } else if (res.data.code == 401) {
            removeToken()
            removeName()
            this.$message.error('登陆超时或该账号已被登出，请您重新登录');
            this.$router.push({
                path: '/#/login'
            })
          }
        })
    },
    lineData() { // 趋势图数据
      this.$axios.get(`${process.env.VUE_APP_KANBAN_HOST}/api/indicator/devops/report/trend?groupId=${this.groupId}&name=${this.targetValue}&time=${this.time}`, {headers: getHeader()})
      .then(res => {
        if(res.status === 200) {
          if(res.data.code === 200) {
            // this.targetValue = res.data.indicator_names[0]
            this.targetSelect = res.data.indicator_names
            res.data.indicator_trend.forEach(val => {
              val.company_indicator = this.lineFormatter(val.indicator_type, val.company_indicator)
              val.actual_indicator = this.lineFormatter(val.indicator_type, val.actual_indicator)
            })
            this.targetData.rows = res.data.indicator_trend
          }
        }
      })
    },
    quality() { // 研发质量
      this.qualityData = []
      this.qualityTable = []
      this.$axios.get(`${process.env.VUE_APP_KANBAN_HOST}/api/indicator/develop/quality?groupId=${this.groupId}&time=${this.time}`, {headers: getHeader()}).then(res => {
        if(res.status === 200) {
          if(res.data.code === 200) {
            this.qualityData = res.data.data
            this.qualityTable = this.qualityData.map(item => {
              return item.group_indicator
            })
          }
        }
      })

    },
    efficiency() { // 研发效率
      this.efficientData = []
      this.efficientTable = []
      this.$axios.get(`${process.env.VUE_APP_KANBAN_HOST}/api/indicator/develop/efficient?groupId=${this.groupId}&time=${this.time}`, {headers: getHeader()}).then(res => {
        if(res.status === 200) {
          if(res.data.code === 200) {
            this.efficientData = res.data.data
            this.efficientTable = this.efficientData.map(item => {
              return item.group_indicator
            })
          }
        }
      })
    },
    complaint() { // 客户投诉
      this.complaintData = []
      this.complaintTable = []
      this.$axios.get(`${process.env.VUE_APP_KANBAN_HOST}/api/indicator/customer/complaint?groupId=${this.groupId}&time=${this.time}`, {headers: getHeader()}).then(res => {
        if(res.status === 200) {
          if(res.data.code === 200) {
            this.complaintData = res.data.data
            this.complaintTable = this.complaintData.map(item => {
              return item.group_indicator
            })
          }
        }
      })
    }
  },
  watch: {
    isCompany(bool) {
      if(!bool) this.radio = 2
    },
    selectedGroup(val) {
      if(this.radio == 2) {
        this.group_selector.forEach(value => {
          if(value.value == val) {
            this.labelChoose = value.label
            this.groupId = value.value
            this.quality()
            this.efficiency()
            this.complaint()
            this.lineData()
          }
        })
      }
    },
    'targetData.rows': {
      handler: function() {
        //this.chartSettings.labelMap.actual_indicator = this.targetValue
        if(this.targetData.rows[0].indicator_type == 'percent') {
          this.chartSettings.labelMap.actual_indicator = this.targetValue + '(%)'
          this.chartSettings.labelMap.company_indicator = '公司目标值(%)'
        } else if(this.targetData.rows[0].indicator_type == '次') {
          this.chartSettings.labelMap.actual_indicator = this.targetValue + '(次)'
          this.chartSettings.labelMap.company_indicator = '公司目标值(次)'
        } else if(this.targetData.rows[0].indicator_type == '个/天') {
          this.chartSettings.labelMap.actual_indicator = this.targetValue + '(个/天)'
          this.chartSettings.labelMap.company_indicator = '公司目标值(个/天)'
        } else if(this.targetData.rows[0].indicator_type == '行/天') {
          this.chartSettings.labelMap.actual_indicator = this.targetValue + '(行/天)'
          this.chartSettings.labelMap.company_indicator = '公司目标值(行/天)'
        } else if(this.targetData.rows[0].indicator_type == '天/个') {
          this.chartSettings.labelMap.actual_indicator = this.targetValue + '(天/个)'
          this.chartSettings.labelMap.company_indicator = '公司目标值(天/个)'
        } else if(this.targetData.rows[0].indicator_type == 'time') {
          this.chartSettings.labelMap.actual_indicator = this.targetValue + '(秒)'
          this.chartSettings.labelMap.company_indicator = '公司目标值(秒)'
        } else if(this.targetData.rows[0].indicator_type == '个/KLOC') {
          this.chartSettings.labelMap.actual_indicator = this.targetValue + '(个/KLOC)'
          this.chartSettings.labelMap.company_indicator = '公司目标值(个/KLOC)'
        } else {
          this.chartSettings.labelMap.actual_indicator = this.targetValue
          this.chartSettings.labelMap.company_indicator = '公司目标值'
        }

      },
      deep: true
    },
    radio(r) {
      if(r == 2) {
        this.labelChoose = this.selectedGroup
        if(this.groupId == '') {
          this.groupId = this.group_selector[0].value
        }
        this.quality()
        this.efficiency()
        this.complaint()
        this.lineData()
      } else {
        this.labelChoose = '集团'
        this.groupId = ''
        this.quality()
        this.efficiency()
        this.complaint()
        this.lineData()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '../assets/common/common.scss';

  #pdfDom{
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;
    .choose{
      padding: 20px 0;
      .flex-box{
        display: flex;
        flex-wrap: nowrap;
        .flexEl{
          flex:1;
          margin: auto;
        }
        .text-align{
          text-align: center;
        }
        .el{
          flex: 0 0 90%;
         }
      }
      .time{
        position: absolute;
        top: 20px;
        right: 27%;
        font-size: 14px;
        color: #606266;
      }
    }
  }
  .PageBtn{
    position: absolute;
    right: 30px;
    top: 18px;
    z-index: 10;
  }
  .border{
      box-sizing: content-box;
      height: 0;
      overflow: visible;
      margin-top: 1rem;
      margin-bottom: 1rem;
      border: 0;
      border-top: 1px solid rgba(0,0,0,.1);
  }
  .primary{
      color: #409EFF;
      font-size: 30px;
      margin-top: 20px;
      margin-bottom: 10px;
      font-weight: 400;
  }
  .bgColor{
      background: #fff;
  }
  .pad{
      padding: 0 20px;
      padding-top: 20px;
  }
  .marT{
      margin-top: 20px;
  }
  .mar{
        margin: 0 20px;
        margin-top: 20px;
    }
  .table{
      padding-bottom: 10px;
  }
</style>
